<template>
  <div class="mei-item">
    <router-link :to="{name: 'Classify'}">
      <van-image
        width="100%"
        height="100%"
        lazy-load
        :src="obj.imageUrl"
      />
      <div class="content">
        <p>{{obj.englishName}}</p>
        <p>{{obj.chineseName}}</p>
        <p>{{obj.discountText}}</p>
        <p>{{obj.siloCategory}}</p>
      </div>
    </router-link>
  </div>
</template>

<script>
import Vue from 'vue'
import { Card, Image, Lazyload } from 'vant'
Vue.use(Card).use(Image).use(Lazyload)

export default {
  props: {
    obj: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.mei-item{
  width: 90vw;
  padding: .1rem 5vw;
  position: relative;
  .content{
    text-align: left;
    color: #fff;
    position: absolute;
    bottom: .3rem;
    left: 12vw;
    font-size: .25rem;
    p:first-of-type{
      font-size: .3rem;
      // line-height: .3rem;
    }
  }
}
</style>
